import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import Handsontable from 'handsontable';
window.Handsontable = Handsontable
export default class App extends React.Component {
    constructor(props) {
        super(props);
        window.$appRoot = this
        this.handsontableData = Handsontable.helper.createSpreadsheetData(60, 23);
        this.hot = React.createRef()
        this.state = {
            data: this.handsontableData
        }
        this.hotSettings = {
            dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
            renderAllRows: false,
            rowHeaders: true,
            minCols:26,
            // startRows:5,
            colHeaders: true,
            // dropdownMenu: true,
            filters: true,
            // height: 'auto',
            dropdownMenu: true,
            cells: function (row, col, prop) {                   
                    let pattern = {
                    };
                    pattern.mantissa = parseInt('15', 10);
                    pattern.thousandSeparated =true
                    // this.type = 'numeric';
                    this.readOnly = false
                    if (col == 2) {
                        this.readOnly = true
                    }
                    // this.numericFormat = {
                    //     pattern
                    // };
            },            
            mergeCells: [
                {
                   "row": 0,
                   "col": 0,
                   "rowspan": 2,
                   "colspan": 1
                },
                {
                   "row": 2,
                   "col": 0,
                   "rowspan": 2,
                   "colspan": 1
                },
                {
                   "row": 4,
                   "col": 0,
                   "rowspan": 2,
                   "colspan": 1
                }
             ],            
            contextMenu: {
                items: {
                  'option1': {
                    name: 'option1'
                  },
                }
              },     
            filters:true,            
            licenseKey: 'non-commercial-and-evaluation',           
            // colWidths: 80,
            // contextMenu: {
            //     "items": {
            //         "formulaTracing": {
            //             "name": "公式追踪",
            //             "key": "formulaTracing"
            //         }
            //     }
            // },
            // // fixedRowsTop: 4,
            // // fixedColumnsLeft: 4,
            // afterRenderer: (TD, row, col, prop, value, cellProperties) => {

            // },
            // afterRender: () => {
            //     // setTimeout(() => {
            //     //     var aCloneTr = document.querySelectorAll('.ht_clone_left tr'); // 获取所有列表头
            //     //     var aCloneTr2 = document.querySelectorAll('.ht_clone_top_left_corner tr'); // 获取所有列表头
            //     //     var aCloneTr3 = document.querySelectorAll('.ht_clone_top tr'); // 获取所有列表头
            //     //     var aMasterTr2 = document.querySelectorAll('.ht_master.handsontable tr');
            //     //     for (var i = 0; i < aMasterTr2.length; i++) {
            //     //         aMasterTr2[i].style.height = aMasterTr2[i].clientHeight + 'px';
            //     //         if (aCloneTr[i]) {
            //     //             aCloneTr[i].style.height = aMasterTr2[i].style.height
            //     //         }
            //     //         if (aCloneTr2[i]) {
            //     //             aCloneTr2[i].style.height = aMasterTr2[i].style.height
            //     //         }
            //     //         if (aCloneTr3[i]) {
            //     //             aCloneTr3[i].style.height = aMasterTr2[i].style.height
            //     //         }                            
            //     //     }
            //     // }, 20);
            // },
            // selectionMode: 'multiple',
            // beforePaste: (data, coords) => {
            //     // console.error('beforePaste',data, coords)
            // },
            afterSetDataAtCell: (changes,source) => {
                console.log('afterSetDataAtCell',changes, source)
            },
            afterChange: (changes,source) => {
                console.log('afterChange',changes, source)
            },
            afterSelectionEnd: function (row, col, endRow, endColumn, selectionLayerLevel) {
                // console.warn(row, col, endRow, endColumn)
            },
        }
    }

    componentDidMount() {

    }
    render() {
        this.hotSettings.renderAllRows = this.state.data.length > 100 ? false : true
        return (
            <HotTable
                id="hot"
                key={`${this.hotSettings.renderAllRows.toString()}`}
                ref={this.hot}
                data={this.state.data}
                settings={this.hotSettings}
                filters = {true}
                dropdownMenu = {['filter_by_condition', 'filter_by_value', 'filter_action_bar']}
            />
        );
    }
}

